<template src="./checkRadio.html"></template>

<script>
export default {
  name: "TianDingCheckRadioComponent",
  props: {
    options: {
      type: Array,
      default: []
    },
    IsPlatform: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      multiple: [],
      sign: []
    };
  },
  mounted() {
    this.options.forEach(element => {
      if (element.check) {
        this.change(element, element.check);
      }
    });
  },
  methods: {
    change(item, check) {
      if (check === undefined) {
        item.check = !item.check;
      }
      if (item.check) {
        if (item.isRadio) {
          this.sign = [];
          this.multiple = [];
          this.sign.push(item.key);
          this.options.filter((v, i, a) => {
            if (v.key !== item.key) {
              v.check = false;
            }
            return a;
          });
        } else {
          this.sign = [];
          this.multiple.push(item.key);
          this.options.filter((v, i, a) => {
            if (v.isRadio) {
              v.check = false;
            }
            return a;
          });
        }
      } else {
        if (item.isRadio) {
          this.sign = [];
          this.multiple = [];
        } else {
          this.sign = [];
          this.multiple.splice(this.multiple.findIndex(i => i === item.key), 1);
        }
      }
      this.$emit("changeEvent", this.sign.concat(this.multiple));
    }
  }
};
</script>

<style lang="scss">
.td-check-radio-box {
  padding: 10px 0;
  li {
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    label {
      input[type="checkbox"] {
        display: none;
      }
      i {
        font-size: 20px;
        margin-right: 10px;
      }
      span {
        margin-left: 10px;
        color: #f00 !important;
      }
    }
  }
}
.td-check-radio-box-doctor {
  i {
    color: #1cd3ce !important;
  }
}

.td-check-radio-box-patient {
  i {
    color: #ff6a9f !important;
  }
}
</style>